<template>
  <div class="nav h-1">
    <router-link to="/" class="nav-item">
      <i class="iconfont icon-shouye"></i>
      <div>首页</div>
    </router-link>
    <router-link to="/category" class="nav-item">
      <i class="iconfont icon-sort"></i>
      <div>分类</div>
    </router-link>
    <router-link to="/desire" class="nav-item">
      <i class="iconfont icon-gerenyonghutouxiang"></i>
      <div>值得买</div>
    </router-link>
    <router-link :to="{ name: 'ShopCart' }" class="nav-item">
      <i class="iconfont icon-gouwuchekong"></i>
      <div>购物车</div>
    </router-link>
    <router-link to="/user" class="nav-item">
      <i class="iconfont icon-gerenyonghutouxiang"></i>
      <div>个人</div>
    </router-link>
  </div>
</template>
<style lang="scss" scoped>
.nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 0.97rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #f4f4f4;
  line-height: 1.4;
  font-size: 0.28rem;

  &-item {
    //nav-item
    flex: 1;
    text-align: center;
    outline: none;

    div {
      color: #666;
    }

    .iconfont {
      font-size: 0.4rem;
      color: #666;
    }
  }

  .router-link-exact-active {
    div {
      color: #DD1A21;
    }

    .iconfont {
      color: #DD1A21;
    }
  }
}</style>